<template>
<div class="z-super-query-box">

  <slot name="button" :isActive="superQueryFlag" :open="handleOpen" :reset="handleReset">
    <a-tooltip v-if="superQueryFlag" v-bind="tooltipProps" :mouseLeaveDelay="0.2">
      <template slot="title">
        <span>已有高级查询条件生效</span>
        <a-divider type="vertical"/>
        <a @click="handleReset">清空</a>
      </template>
      <a-button-group>
        <a-button type="primary" @click="handleOpen">
          <a-icon type="appstore" theme="twoTone" spin/>
          <span>高级查询</span>
        </a-button>
        <!-- <a-button v-if="izMobile" type="primary" icon="delete" @click="handleReset"/> -->
      </a-button-group>
    </a-tooltip>
    <a-button v-else type="primary" icon="filter" @click="handleOpen">高级查询</a-button>
  </slot>

  <z-modal
    title="高级查询构造器"
    :width="900"
    :visible="visible"
    @cancel="handleCancel"
    :mask="false"
    :maskClosable="false"
    class="z-super-query-modal"
    style="top:5%;max-height: 95%;"
  >
    <template slot="footer">
      <a-button :loading="loading" @click="handleCancel">关闭</a-button>
      <a-button :loading="loading" @click="handleReset">重置</a-button>
      <a-button :loading="loading" type="primary" @click="handleOk">查询</a-button>
    </template>
    <a-spin :spinning="loading">
      <SuperQuery :fieldList="fieldList" ref="superQuery" :isNewLine="true" />
    </a-spin>
  </z-modal>
</div>
</template>

<script>
import moment from 'moment'
import SuperQuery from './SuperQuery'
export default {
  name: 'JSuperQuery',
  mixins: [],
  components: { SuperQuery },
  props: {
    fieldList: {
      type: Array,
      required: true
    },
    /*
      * 这个回调函数接收一个数组参数 即查询条件
      * */
    callback: {
      type: String,
      required: false,
      default: 'handleSuperQuery'
    },

    // 当前是否在加载中
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      moment,
      fieldTreeData: [],
      visible: false,
      superQueryFlag: false,
      queryParam: []
    }
  },
  computed: {
    tooltipProps() {
      return {}
    }
  },
  methods: {
    show() {
      this.visible = true
    },
    handleOk() {
      const params = this.$refs.superQuery.getQueryParams()
      if (params && params.length > 0) {
        this.superQueryFlag = true
        this.queryParam = params
        this.$emit(this.callback, params)
      } else {
        this.$message.warning('请填写查询条件')
      }
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleOpen() {
      this.show()
    },
    handleReset() {
      this.superQueryFlag = false
      this.$refs.superQuery.resetLine()
      this.$emit(this.callback, [])
    },
    isNullArray(array) {
      // 判断是不是空数组对象
      if (!array || array.length === 0) {
        return true
      }
      if (array.length === 1) {
        const obj = array[0]
        if (!obj.fieldName || (obj.value == null || obj.value === '') || !obj.operator) {
          return true
        }
      }
      return false
    },
    // 去掉数组中的空对象
    removeEmptyObject(arr) {
      const array = JSON.parse(JSON.stringify(arr)) // utils.cloneObject(arr)
      for (let i = 0; i < array.length; i++) {
        const item = array[i]
        if (item == null || Object.keys(item).length <= 0) {
          array.splice(i--, 1)
        } else {
          if (Array.isArray(item.options)) {
            // 如果有字典属性，就不需要保存 options 了
            if (item.dictCode) {
              // 去掉特殊属性
              delete item.options
            }
          }
        }
      }
      return array
    }
  }
}
</script>

<style lang="less" scoped>
  // .z-super-query-box {
  //   display: inline-block;
  // }
</style>
